<template>
    <div  class="agentP" >
    
            <div  class="agent">

                <div class="agent-title">
                    <div :style="{fontSize: '0.89rem',fontFamily: 'PingFang SC',fontWeight: 450,color: '#FFFFFF'}" >代理</div>
                    <img :style="{ width:'0.5rem' }" src="../../style/image/stati/A29.png" alt="">
                </div>

                <div class="agent-content">
                        <div class="agent-content-item">
                        <div>55</div>
                        <div>总商户数</div>
                        </div>
                         <div class="agent-content-item">
                        <div>55</div>
                        <div>当月新增</div>
                        </div>
                         <div class="agent-content-item">
                        <div>55</div>
                        <div>当日新增</div>
                        </div>
                </div>
            </div>
              <div  class="agent">

                <div class="agent-title">
                    <div :style="{fontSize: '0.89rem',fontFamily: 'PingFang SC',fontWeight: 450,color: '#FFFFFF'}" >个人</div>
                    
                    <img :style="{ width:'0.5rem' }" src="../../style/image/stati/A29.png" alt="">
                    
                </div>

                <div class="agent-contents">
                        <div class="agent-content-items">
                        <div>55</div>
                        <div>总商户数</div>
                        </div>
                         <div class="agent-content-items">
                        <div>55</div>
                        <div>当月新增</div>
                        </div>
                         <div class="agent-content-items">
                        <div>55</div>
                        <div>当日新增</div>
                        </div>
                         <div class="agent-content-items">
                        <div>55</div>
                        <div>当日新增</div>
                        </div>
                </div>
            </div>


                <div class="productP" >

                <div class="searchPP">
                <div class="searchP">
                <div class="search" :style="{ width:'100%' }" >
                    <u-search placeholder="请输入商户姓名或电话"  
                    shape="round"
                    v-model="keyword"
                    :show-action='false'
                    ></u-search>
                </div>
                <!-- <div @click="celendarM" class="celendar">
                <img :style="{ width:'1.1rem',height:'1.1rem', margin:'0rem 0.5rem'}" src="../../style/image/stati/日历@3x.png" alt="">
                <div>2019.10.09</div>
                </div> -->

                </div>
                </div>
               

                <div class="celendar-base" >

                <div @click="celendarM" class="celendar">
             <div class="celendar-child">
                <img :style="{ width:'0.9rem',height:'0.9rem', margin:'0rem 0.4rem'}" src="../../style/image/stati/A33.png" alt="">
                <div>2019.10</div>
             </div>
                </div>

                <u-dropdown>
			<u-dropdown-item v-model="value2" title="全部设备" :options="options2"></u-dropdown-item>
		         </u-dropdown>
                </div>


              
              

                <div class="allDataC" v-for="(item,index) in allData " :key="index" >

                 <div   class="allDataC-item">

                <div class="allDataC-item-title">
                   <!-- <div :style="{padding:'0.5rem 0rem',display:'flex',justifyContent: 'space-between'  }" class="allDataC-item-div" > -->
                    <div :style="{ }" class="allDataC-item-div" >
                        <div :style="{ fontSize: '0.83rem',fontFamily: 'PingFang SC',fontWeight: 400,color: '#000000'}"  >拉卡拉总代理<span :style="{fontSize: '0.72rem',fontFamily: 'PingFang SC',fontWeight: 300,color: '#0FA773' }" >(设备在线)</span></div>
                         <div style=" font-size: 0.61rem;font-family: PingFang SC;font-weight: 300;color: #666666;padding: 0.2rem 0rem " >创建时间：2020-08-22</div>
                   </div>
                 
                   <img style="width:1.5rem; height:'1.5rem" src="../../style/image/stati/A18.png" alt="">
                   

                    </div>

                    <div class="allDataC-item-content">
                            <div class="itemData" >
                                <div>98.00</div>
                                <div class="dataText" >我的总收益</div>
                            </div>
                             <div class="itemData" >
                                <div>98.00</div>
                                <div class="dataText" >商户收益</div>
                            </div>
                             <div class="itemData" >
                                <div>98</div>
                                <div class="dataText" >总订单数</div>
                            </div>
                             <div class="itemData" >
                                <div>9</div>
                                <div class="dataText" >已支付订单</div>
                            </div>
                    </div>
                     <div class="" style="border-bottom: 1px solid #e8e8e8;" >
                           <div class="prolifyP" >
                            <div style="display: flex;">
                                <div style="font-size: 0.72rem;font-family: PingFang SC;font-weight: 300;color: #666666;" >分润人:</div>
                                <div style="margin-left: 3px;" >胡某  19098877887</div>
                            </div>
                            <img style="width: 0.9rem;height: 0.9rem;" src="../../style/image/stati/A30.png" alt="">
                           </div>
                    </div>

                    <div class="agentprolify">
                            <div>
                            商户分润比例:
                            </div>
                            <p>
                            绝对分润比例
                            </p>
                            <div>
                             50%
                            </div>
                    </div>
                      
                 </div>
                
                </div>
           

                </div>

               <u-calendar 
               v-model="show"
                :mode="mode" 
                @change="change"
                :safe-area-inset-bottom='true'
                ></u-calendar>
    </div>
          
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public show = false;
  public allData=['1','2','3']
  public value1 = 1;
  public value2 = 2;
  public options1 = [
    {
      label: "默认排序",
      value: 1,
    },
    {
      label: "距离优先",
      value: 2,
    },
    {
      label: "价格优先",
      value: 3,
    },
  ];
  public options2 = [
    {
      label: "去冰",
      value: 1,
    },
    {
      label: "加冰",
      value: 2,
    },
  ];

  created() {
       document.body.scrollTop = document.documentElement.scrollTop = 0;
    //    alert(1)
  }

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
  }
  celendarM(){
    
     document.body.scrollTop = document.documentElement.scrollTop = 0;
    this.show=!this.show
    
  }
}
</script>

<style  scoped>

.agentP{


}

.agent{
background: linear-gradient(180deg, #02AF74, #0BD372);
border-radius: 0.8rem;
 margin: 1rem;
}

.agent-title{

    display: flex;
    justify-content: space-between;
    align-items: center;
 /* margin: 0.5rem 0.5rem; */
 padding: 0.5rem 1rem;
 border-bottom: 1px solid #82dcba;
}
.agent-content{

 display: flex;
 padding: 0.5rem 1rem 1rem 1rem;
 /* justify-content: ; */
}

.agent-content-item{
 width: 33.3%;
 text-align: center;
 
}

/* 个人 */
.agent-contents{

 display: flex;
 padding: 0.5rem 1rem 1rem 1rem;
 /* justify-content: ; */
}

.agent-content-items{
 width: 25%;
 text-align: center;
 
}
.agent-content-items :first-child{

font-size: 0.83rem;
font-family: PingFang SC;
font-weight: 300;
color: #FFFFFF;
 
}
.agent-content-items :nth-child(2){

font-size: 0.83rem;
font-family: PingFang SC;
font-weight: 300;
color: #FFFFFF;
 
}

.agent-content-item :first-child{

font-size: 0.83rem;
font-family: PingFang SC;
font-weight: 300;
color: #FFFFFF;
 
}
.agent-content-item :nth-child(2){

font-size: 0.83rem;
font-family: PingFang SC;
font-weight: 300;
color: #FFFFFF;
 
}






.prolify {
  font-size: 0.78rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #ffffff;
}

.productP {
  background-color: #f3f5f7;
  padding: 0.4rem 0rem;
}
.searchPP {
  background-color: white;
  padding: 0.5rem;
}
.searchP {
  background-color: white;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.celendar-base{

        display: flex;
        align-items: center;
        margin: 0.2rem 0rem;
}

.celendar {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.celendar-child{
display: flex;
  align-items: center;
  background-color: white;
  padding: 0.3rem;
  border-radius: 5px;
}

.celendar :nth-child(2) {
  font-size: 0.72rem;
  font-family: PingFang SC;
  /* font-weight: 300; */
  color: #000000;
}

.totle-contents {
  /* border-bottom-right-radius: 0.8rem;
    border-bottom-left-radius: 0.8rem; */
  border-radius: 0.2rem;
  background-color: white;
  justify-content: space-between;
  display: flex;
  padding: 1rem 0.5rem;
  margin: 0rem 1rem 0.5rem 1rem;
}
.totle-contents-item {
  width: 33.3%;
  text-align: center;
}

.totle-contents-item :first-child {
  font-size: 0.85rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #02b074;
}
.totle-contents-item :nth-child(2) {
  font-size: 0.65rem;
  font-family: PingFang SC;
  font-weight: 300;
}

.allDataC{
    margin: 0.5rem;
    border-radius: 0.2rem;
    background-color: white;
}

.allDataC-item-title{

    /* display: flex;
    justify-content: space-between; */
    padding: 1rem;
    border-bottom: 1px solid#e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.allDataC-item-div{


}

.allDataC-item-content{
    display: flex;
    justify-content: space-between;
     border-bottom: 1px solid#e8e8e8;
}

.itemData{
 text-align: center;
 padding: 1rem 0.5rem;
 width: 25%;
 text-align: center;
}
.itemData :first-child{
 margin-bottom: 0.3rem;
}

.dataText{

font-size: 0.67rem;
font-family: PingFang SC;
font-weight: 399;
color: #000000;
}

.prolifyP{
     display: flex;
     padding: 0.8rem 1rem;
     justify-content: space-between;
}

    /* 加上标签 或者加上>   */
.agentprolify{
    display: flex;
    align-items: center;
    padding: 0.8rem 1rem;
}

.agentprolify :first-child{
    font-size: 0.72rem;
    font-family: 'PingFang SC';
    font-weight: 300;
    color: #666666;
}

.agentprolify>:nth-child(1){
    
}
.agentprolify>:nth-child(2){
    color: red;
}






</style>